<template>
  <Form :model="data" :rules="rules" mode="twocolumn" ref="form" style="min-width: 600px">
    <FormItem label="父级菜单" prop="parent">
      <CategoryPicker :option="menuOption" v-model="data.parent" @change="onParentChange" :disabled="!isAdd"></CategoryPicker>
    </FormItem>
    <FormItem label="ID" prop="id" required>
      <Input type="text" v-model="data.id" :disabled="!isAdd"/>
    </FormItem>
    <FormItem label="标题" prop="title">
      <Input type="text" v-model="data.title"/>
    </FormItem>

    <FormItem label="排序" prop="sort">
      <NumberInput v-model="data.sort" :precision="0"></NumberInput>
    </FormItem>
    <FormItem label="路径" prop="path">
      <Input type="text" v-model="data.path"/>
    </FormItem>
    <FormItem label="图标" prop="icon">
      <IconSelect v-model="data.icon"/>
    </FormItem>
    <FormItem label="类型" prop="menuType">
      <Select v-model="data.menuType" dict="MenuType" :deletable="false"></Select>
    </FormItem>
    <FormItem label="所属分组" prop="menuGroup">
      <Select dict="UserType" v-model="data.menuGroup" :deletable="false" disabled/>
    </FormItem>
    <FormItem label="是否启用" prop="enable">
      <Switch v-model="data.enable"/>
    </FormItem>
    <FormItem label="内置菜单" prop="system">
      <Checkbox :checked="data.system"/>
    </FormItem>
  </Form>
</template>
<script setup>
import {ajax} from 'framework'
import {ref, reactive} from 'vue'
import {message} from 'heyui'
import IconSelect from "./IconSelect.vue";


//事件
//Props Open方法传入的参数
const {params, dialog} = defineProps({
  params: Object,
  dialog: Object
})

//dialog.cancel() 方法可以直接关闭对话框
//打开Dialog时进行初始化
let isAdd = false
if (params.id) {
  //通知Dialog处于loading状态
  dialog.loading(true)
  ajax.get("menu/detail", params).then(r => {
    Object.assign(data, r.data)
    dialog.loading(false)
  })
} else {
  isAdd = true
}

//属性和状态
let form = ref(null)

//表单数据
const data = reactive({
  id: null,
  title: null,
  parent: null,
  sort: null,
  path: null,
  icon: null,
  menuType: 0,
  menuGroup: params.menuGroup,
  enable: true,
  system: false,
})

const menuOption = {
  keyName: "id",
  titleName: "title",
  parentName: "parent",
  dataMode:'list',
  getTotalDatas(resolve) {
    ajax.post("menu/list", {menuGroup: data.menuGroup,menuType:'0'}).then(r => {
      resolve(r.data)
    })
  }
}
//验证规则
const rules = {}

function onParentChange(v){
  if(v){
    if(!data.id){
      data.id=v.key+'.'
    }else if(/\.$/.test(data.id)){
      data.id=v.key+'.'
    }else{
      let idx=data.id.lastIndexOf('.')
      if(idx>-1){
        data.id=v.key+data.id.substring(idx)
      }else{
        data.id=v.key+"."+data.id
      }
    }
  }else{
    if(!data.id||/\.$/.test(data.id)){
      data.id=''
    }else{
      let idx=data.id.lastIndexOf('.')
      if(idx>-1){
        data.id=data.id.substring(idx+1)
      }
    }
  }
}
/**
 * 提交数据
 */
dialog.onSubmit(() => {
  let validResult = form.value.valid();
  if (validResult.result) {
    dialog.loading(true)
    ajax.post(isAdd ? 'menu/add' : 'menu/save', data).then(r => {
      message("已保存")
      dialog.success(r.data)
    }).catch(e => {
      message.error(e.message)
    }).finally(f => dialog.loading(false))
  }
})

</script>
